<template>
    <div class="box_bg">
        <!-- 内容区域  开始 -->
        <div class="components_con">
            <!-- 查询开始 -->
            <div class="components_searchs" @keyup.enter="queryTable">
                <span class="tit">教材名称：</span>
                <el-input v-model="table.queryParams.name" auto-complete="off" placeholder="请输入教材名称"></el-input>

                <span class="tit">专业组：</span>
                <el-select v-model="table.queryParams.professionGroupId" clearable placeholder="请选择专业组">
                    <el-option v-for="item in professionGroupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>

                <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
            </div>
        </div>
        <!-- components_btns -->
        <div class="components_btns clearfix">
            <div class="fl">
                <el-button type="primary" v-has="'courseBook:add'" size="mini" icon="el-icon-plus" @click="showAddDialog">添加教材</el-button>
                <el-button type="primary" v-has="'courseBook:export'" size="mini" @click="exportExcel">
                    <i class="iconfont icon-leading-iout"></i>
                    导出
                </el-button>
            </div>
        </div>
        <!-- components_btns -->
        <div class="scrollBarX">
            <vue-table
                :api-url="table.apiUrl"
                :fields="table.fields"
                :appendParams="table.queryParams"
                :content="self"
                ref="courseBookTable">
            </vue-table>
        </div>
        <course-book-add ref="courseBookAdd"></course-book-add>
        <course-book-edit ref="courseBookEdit"></course-book-edit>
    </div>
</template>

<script>
    import moment from 'moment'
    import { config } from '@/config'
    import courseBookAdd from './course-book-add'
    import courseBookEdit from './course-book-edit'
    export default {
        components: {
            courseBookAdd,
            courseBookEdit
        },
        data() {
            return {
                self: this,
                // 班级表格
                table: {
                    apiUrl: api.courseBook.query,
                    queryParams: {
                        name: null,   //教材名称
                        professionGroupId: null,   //专业组
                    },
                    fields: [{
                            prop: "name",
                            label: "教材名称",
                        },
                        {
                            prop: "professionGroupLabel",
                            label: "专业组",
                        },
                        {
                            prop: "natureLabel",
                            label: "性质",
                        },
                        {
                            prop: "author",
                            label: "作者",
                        },
                        {
                            prop: "publishingHouse",
                            label: "出版社",
                        },
                        {
                            prop: "publishDate",
                            label: "出版时间",
                            formatter: function(row, column, cellValue){
                                return moment(cellValue).format('YYYY-MM-DD');
                            }
                        },
                        {
                            prop: "bookNumber",
                            label: "书号",
                        },
                         {
                            prop: "number",
                            label: "数量",
                            /* formatter: function(row, column, cellValue){
                                return cellValue == null ? 0 : cellValue;
                            } */
                        },
                        {
                            prop: "remark",
                            label: "备注",
                        },
                        {
                            prop: "__action",
                            label: "操作",
                            width: '180',
                            actions: [{
                                    label: "编辑",
                                    type: "edit",
                                    auth:'courseBook:update',
                                    func: function(vm, row) {
                                        vm.$refs.courseBookEdit.showDialog(row.id);
                                    }
                                },
                                {
                                    label: "删除",
                                    type: "edit",
                                    auth:'courseBook:delete',
                                    func: function(vm, row) {
                                       vm.deleteById(row.id);
                                    }
                                },
                            ]
                        },
                    ],
                },
                //专业组列表
                professionGroupList: null,
            };
        },
        created() {
            // 获取专业组列表
            this.getProfessionGroupList();
        },
        mounted() {},
        computed:{},
        watch: {},
        methods: {
            // 获取院校数据
            getProfessionGroupList() {
                let vm = this;
                vm.axios.get(api.professionGroup.queryAllList).then((response) => {
                    if (response.data.success) {
                        this.professionGroupList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 根据id删除
            deleteById(id) {
                let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.courseBook.deleteById + id)
                        .then((response) => {
                            if (response.data.success) {
                                vm.$message({
                                    message: response.data.msg,
                                    type: 'success',
                                });
                                vm.$refs.courseBookTable.$emit('vuetable:current-refresh')
                            } else {
                                vm.$message.error(response.data.msg);
                            }
                        })
                }, () => {})
            },
            // 导出excel
            exportExcel(){
                let vm = this;
                let href = config.BASE_URL + api.courseBook.exportExcel;
                href += "?Authorization=" + localStorage.getItem("userToken");
                // 拼接条件
                for(let item in vm.table.queryParams){
                    // 为了0和false
                    if(vm.table.queryParams[item] != null && vm.table.queryParams[item] !== ""){
                        href += "&" + item + "=" + vm.table.queryParams[item];
                    }
                }

                window.location.href = href;
            },
            // 打开新增培养方案dialog
            showAddDialog() {
                this.$refs.courseBookAdd.showDialog();
            },
            // 查询按钮
            queryTable() {
                this.$refs.courseBookTable.$emit('vuetable:refresh')
            },
            // 重置
            reset(){
                for(let key in this.table.queryParams){
                    this.table.queryParams[key] = null;
                }
                this.$refs.courseBookTable.$emit('vuetable:refresh')
            },
        },
    };
</script>
<style scoped>
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }
</style>


